<template>
<!--  <el-calendar v-model="value" /> -->
<el-container>
      <el-menu @select="handleSelect">
	     <el-menu-item index="1">          <span>测试页面一Button</span>         </el-menu-item>
		 <el-menu-item index="2">
		  <span>测试页面二Table</span>
		 </el-menu-item>
		 <el-menu-item index="3">
		  <span>测试页面三Date</span>
		 </el-menu-item>
		 <el-menu-item index="4">
		  <span>课程管理</span>
		 </el-menu-item>
		 <el-menu-item index="5">
		  <span>学生管理</span>
		 </el-menu-item>
		 <el-menu-item index="6">
		  <span>测试页面六</span>
		 </el-menu-item>
      </el-menu>
      <el-main>        <component :is="selectedComponent"></component>
<!-- 		<TestCount></TestCount> -->      </el-main>
</el-container>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import TestCount from '../components/TestCount.vue'
import HelloWorld from '../components/HelloWorld.vue'
import Date from '../components/Date.vue'
import course from '../components/Course.vue'
import student from '../components/Student.vue'


const selectedComponent= ref(TestCount);
const topBtn = ref([   { id: 1, name: '测试页面一Button' ,component:TestCount},   { id: 2, name: '测试页面二Table' ,component:HelloWorld},   { id: 3, name: '测试页面三Date' ,component:Date},
   { id: 4, name: '课程管理' ,component:course},
   { id: 5, name: '学生管理' ,component:student},])
const handleSelect = (key: string, keyPath: string[]) => {    selectedComponent.value = topBtn.value[parseInt(key)-1].component;   }
// const value = ref(new Date())

</script>

<style lang="scss" scoped>.el-container {    height: 100%;  }.el-menu{      margin-top: 10px;      margin-right: 25px;      height:100%;      border:1px    }.el-main {             margin-left: 40px;      }</style>